<template>
  <div style="page-break-after: always">
    <div v-for="(item, index) in datalist" :class="[
      page3 ? 'page-a3' : 'page-a4',
      isVertical ? 'print-page' : 'print-page-transverse',
    ]" style="" id="printBox">
      <!-- 标题 -->
      <h3 class="h1-page">
        <slot name="title" :item="item"> </slot>
      </h3>
      <!-- 页脚 -->
      <div v-if="isPageSize" style="text-align: right; margin-bottom: 10px;" :style="'padding-right:' + paddrg + 'px'">
        第{{ item.pageNum }}页，共{{ item.total }}页
      </div>

      <slot :item="item"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    /* 需要打印的行信息 */
    printRow: {
      default: [],
      type: Array,
    },
    paddrg: {
      default: "0px",
      type: String,
    },
    checkLabel: {
      default: "contentList",
      type: String,
    },
    checkNum: {
      default: 10,
      type: Number,
    },
    /* 需要打印页脚信息 */
    isPageSize: {
      default: true,
      type: Boolean,
    },
    /* a3判断 */
    page3: {
      default: false,
      type: Boolean,
    },
    /* 是否纵向 */
    isVertical: {
      default: true,
      type: Boolean,
    },
    /* 标题 */
    title: {
      default: "",
      type: String,
    },
    /* 总页数 */
    total: {
      default: 0,
      type: [String, Number],
    },
    /* 当前页 */
    pageNum: {
      default: 0,
      type: [String, Number],
    },
  },
  data() {
    return {
      datalist: [],
    };
  },
  watch: {
    printRow: {
      handler(e) {
        console.log(e, "---");
        this.checkPrint(e);
      },
    },
  },
  mounted() {
    window.addEventListener('afterprint', this.handlePrint); // 监听打印完成事件
  },
  beforeDestroy() {
    window.removeEventListener('afterprint', this.handlePrint); // 在组件销毁前移除事件监听
  },
  methods: {
    print() {
      console.log('adaa');
    },
    handlePrint() {
      console.log('打印');
    },
    checkPrint() {
      console.log('...///.../.././.');
      let list = [];
      console.log(this.printRow,this.checkLabel);
      this.printRow.forEach((e) => {
        let pageNum = 0;
        // console.log(e[this.checkLabel],e[this.checkLabel].length);
        if (e[this.checkLabel] && e[this.checkLabel].length > this.checkNum) {
          console.log('biaoge');

          for (
            let i = 0, len = e[this.checkLabel].length;
            i < len;
            i += this.checkNum
          ) {
            console.log(i);
            pageNum++;
            console.log(e[this.checkLabel].length);
            console.log(Math.ceil(e[this.checkLabel].length / this.checkNum));
            list.push({
              ...e,
              contentList: e[this.checkLabel].slice(i, i + this.checkNum),
              pageNum: pageNum,
              total: Math.ceil(e[this.checkLabel].length / this.checkNum),
            });
          }
        } else {
          list.push({
            ...e,
            pageNum: 1,
            total: 1,
          });
        }
      });
      console.log(list, 'list');
      this.datalist = list;
    },
  },
  mounted() { },
};
</script>

<style scoped>
.page-bottom {
  margin-top: 10px;
}

.table-page {
  margin-top: 25px;
}

tr {
  page-break-inside: avoid;
}

table,
table tr th,
table tr td {
  border: 1px solid;
  height: 10px;
  padding: 10px;
  font-size: 12px;
}

table {
  line-height: 25px;
  /* text-align: center; */
  border-collapse: collapse;
}

.table_header {
  font-size: 12px;
}

.table-box {
  border: 1px solid;
}

.h1-page {
  /* text-align: center; */
  margin-top: 10mm;
}

.print-page {
  width: 210mm;
  /* A4 纸张宽度 */
  margin: 0 auto;
  /* text-align: center; */
  margin-bottom: 14mm;
  border: 1px solid #bbb;
  border-bottom: 0;
}

.print-page-transverse {
  width: 297mm;
  /* text-align: center; */
  margin-bottom: 14mm;
  border: 1px solid #bbb;
  border-bottom: 0;
}

.page-a4 {
  position: absolute;
  top: 9999999px;
  padding: 20px;
  margin-bottom: 0;
}

.page-a3 {
  position: absolute;
  top: 9999999px;
  width: 420mm;
  height: 800mm;
  padding: 20px;
  margin-bottom: 0;
}</style>
